<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .abtn {
        display: inline-block;
        height: 18px;
        line-height: 18px;
        background-color: brown;
        border-radius: 5px;
        padding: 7px 7px;
        cursor: pointer;
      }

      .bg {
        background-color: bisque;
      }

      img {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 60%;
        top: 30%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <table>
        <tr>
          <th>序号</th>
          <th>编号</th>
          <th>名称</th>
          <th>单价</th>
          <th>库存</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <tr v-for="(p,index) in products"></tr>
      </table>
    </div>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/jquery.js"></script>
    <script>
      Vue.filter('currency', function (v, n) {
        if (!v) return ''
        return '￥' + parseFloat(v).toFixed(n || 2)
      })
      let vm = new Vue({
        el: '#app',
        data: {
          products: [],
          productModel: {
            proid: 0,
            proname: '',
            price: 0,
            amount: 0,
            description: '',
          },
          isAdd: true,
        },
        created() {
          this.getAll()
        },
        methods: {
          getAll() {
            $.getJSON('http://localhost:8080/exam_sql_product/list', (data) => {
              this.products = data

              this.products.forEach((item, index) => {
                item.oPrice = (item.price * (1 + Math.random())).toFixed(2)
              })
              console.log(this.products)
            })
          },
          insert() {
            $.ajax({
              url: 'http://localhost:8080/exam_product/pro/insert',
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify(vm.productModel),
              success: (data) => {
                if (data) {
                  vm.productModel = {}
                  vm.getAll()
                } else {
                  alert('插入失败！')
                }
              },
            })
          },
          update() {
            $.ajax({
              url: 'http://localhost:8080/exam_product/pro/update',
              type: 'PUT',
              contentType: 'application/json',
              data: JSON.stringify(vm.productModel),
              success: (data) => {
                if (data) {
                  vm.clear()
                  vm.getAll()
                } else {
                  alert('更新失败')
                }
              },
            })
          },
          clear() {
            this.productModel = {}
            this.isAdd = true
          },
          save() {
            if (vm.isAdd) {
              vm.insert()
            } else {
              vm.update()
            }
          },
          remove(index, p) {
            if (confirm('您确定要删除此商品吗!')) {
              $.ajax({
                url: 'http://localhost:8080/exam_product/pro/delete=' + p.proid,
                type: 'DELETE',
                success: (data) => {
                  if (data) {
                    this.getAll()
                  } else {
                    alert('移除失败')
                  }
                },
              })
            }
          },
          edit(index, p) {
            this.isAdd = false
            this.productModel = JSON.parse(JSON.stringify(p))
          },
        },
        computed: {
          total() {
            let total = 0
            this.products.forEach((item) => (total += item.amount * item.price))
            return total
          },
        },
      })
    </script>
  </body>
</html>
